<template>
    <div class="main">
        <div class="fixed-section">
            <div class="head-title">
                <div class="left-arrow" @click="onClickLeft"></div>
                <span>{{$t('m.Busline')}}</span>
            </div>
            <div style="margin:10px">
            <van-field
                :placeholder="$t('m.Searchbuslinenumber')"
                left-icon="search"
                border
                v-model="lineNumber"
                @input="getNewData"
                class="add-border"
            />
        </div>
        </div>
        <div class="result-section">
        <van-list
            v-model="loading"
            :finished="finished"
            loading-text="Loading..."
            @load="getList"
        >
            <div class="data-item"
                 @click="gotoDetail(item)"
                 v-for="(item, index) in tableData" :key="index"
            >
                <div class="bus-number" :style={backgroundColor:item.color}>{{getLineNumberName(item.lineNum)}}</div>
                <div class="bus-detail">
                    <p class="rest-name">{{getRestName(item.lineNum)}}</p>
                    <p>{{unicodeTozawgyi(item.start)}}</p>
                    <p>{{unicodeTozawgyi(item.end)}}</p>
                </div>
            </div>
            <div class="no-data" v-if="finished">no more~</div>
        </van-list>
        </div>
    </div>
</template>
<script>
    import {getBusRoute} from '../../static/api/mgc_api'

    export default {
        data() {
            return {
                start: '',
                loading: false,
                finished: false,
                tableData: [],
                sort: '',
                lineNumber: '',
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },
                ifHaveData:false,

            }
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            gotoDetail(item) {
                let queryObj = {
                    lineInfo: JSON.stringify(item),
                };
                this.$router.push({
                    path: '/map-details/lineid-detail',
                    query: queryObj
                })
            },
            getNewData() {
                this.tableData = []
                this.pageData.pageNum = 1;
                this.finished=false
                this.getList()
            },
            getList() {
                let searchForm = {};
                searchForm.sort = this.sort
                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                searchForm.lineNumber = this.lineNumber
                this.loading = true
                getBusRoute(searchForm)
                    .then(res => {
                        if (res.data.data.errorID == 0) {
                            let dataList = res.data.data.object.list || []
                            this.tableData = this.tableData.concat(dataList)
                            // // 分页信息配置
                            this.pageInfo.totalPages = res.data.data.object.pages
                            this.pageInfo.totalCount = res.data.data.object.total
                            this.pageData.pageNum = this.pageData.pageNum + 1
                            if (this.pageData.pageNum > this.pageInfo.totalPages) {
                                this.finished = true
                            }
                            this.loading = false
                        }
                        else {
                            this.loading = false
                            this.$toast(res.data.data.message)
                            this.finished = true
                        }
                    })
                    .catch(err=>{
                        console.log(err)
                        this.loading = false
                    })
            },
            //unicode转交集
            unicodeTozawgyi(value){
                if(value){
                    return this.$translateLang(value,'unicodeTozawgyi')||''
                }else{
                    return value;
                }
            },
            getLineNumberName(item) {
                let index = item.indexOf('(')
                if (index == -1) {
                    return item
                }
                else {
                    return item.substring(0, index)
                }
            },
            getRestName(item) {
                let index = item.indexOf('(')
                if (index == -1) {
                    return ''
                }
                else {
                    return  this.$translateLang(item.substring(index),'unicodeTozawgyi')||''
                }
            }
        },
        mounted() {
        }
    }
</script>
<style scoped>
    .main{
        font-family: Zawgyi-One, Heslvetica Neue,Helvetica,Arial,sans-serif !important;
    }
    .fixed-section{
        position:fixed;
        left:0;
        right:0;
        top:0;
        background:white;
    }
    .fixed-section .head-title {
        text-align:center;
        height:46px;
        position:relative;
    }
    .fixed-section .head-title .left-arrow{
        position:absolute;
        width:28px;
        height: 28px;
        background:url(../../static/img/leftArrow.png);
        background-size: cover;
        left:5px;
        top:9px;
    }
    .fixed-section .head-title span {
        font-size:20px;
        font-weight:500;
        line-height:46px;
        color:black;
    }
    .add-border {
        border: solid 1px rgba(0, 0, 0, .3) !important;
        border-radius:23px;
        font-size:16px;
    }

    .result-section{
        margin-top:112px;
    }
    .data-item {
        display: flex;
        margin: 0 10px;
        align-items: center;
        height: 80px;
        border-bottom: solid 1px rgba(33, 33, 33, .3);
    }
    .data-item .bus-number {
        width: 60px;
        height: 60px;
        line-height: 60px;
        border: solid 1px black;
        text-align: center;
        color: #fff;
    }
    .data-item .bus-detail {
        flex: 1;
        margin-left: 10px;
    }
    .data-item .bus-detail p {
        margin: 5px 0;
    }
    .data-item .bus-detail .rest-name{
        color:red;
    }
    .no-data{
        text-align:center;
        font-size:14px;
        color:red;
    }
</style>
